/**
 * 编辑页面离开提示
 * EditPageLeavePrompt
 *
 * 在使用页面中写入方法 getIsEdited
 */

import { MessageBox } from 'element-ui'
export default {
  methods: {
    /**
      * 接口、获取当前是否已经编辑过的
      * @interface
      */
    _beforeunloadHandler(event) {
      const isEdit = this.getIsEdited
      console.log(isEdit, 'isEdit');
      if (isEdit) {
        event.preventDefault()
        // Chrome requires returnValue to be set.
        event.returnValue = '您在页面编辑了未保存，是否确认离开'
        return '您在页面编辑了未保存，是否确认离开'
      }
    }
  },
  watch: {
    getIsEdited(newV) {
      console.log(newV, '!!!');
    }
  },
  mounted() {
    this.$bus.$on('changePath', i => {
      console.log(i, this.getIsEdited, 'iiii');
      if (this.getIsEdited) {
        this.$nextTick(() => {
          const aItem = Array.from(document.getElementsByTagName('a'))
          aItem.forEach(item => {
            if (item.hash === '#' + i && item.firstChild.nodeType === 1) {
              item.firstChild.style.color = 'rgb(191, 203, 217)';
            }
          })
        })
      }
    })

    window.addEventListener('beforeunload', this._beforeunloadHandler)
  },

  beforeDestroy() {
    window.removeEventListener('beforeunload', this._beforeunloadHandler)
  },

  beforeRouteLeave(to, form, next) {
    const isEdit = this.getIsEdited
    console.log(isEdit, 'isEdit');
    if (isEdit) {
      // *** 此处必须要加延迟执行、不加的话点击浏览器按钮时会存在问题，弹框一闪而过，
      // 页面没有变，但是地址已经变了
      setTimeout(() => {
        MessageBox({
          title: '提示',
          message: `
             <div style="min-height: 50px; line-height: 22px;">
             <i class="el-icon-warning" style="color: rgb(90, 164, 255); font-size: 20px; vertical-align: middle;"></i>
             <span style="color: rgb(48, 49, 51);">您在页面编辑了未保存，是否确认离开</span>
           </div>
           `,
          showCancelButton: true,
          dangerouslyUseHTMLString: true,
          // type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(() => {
            // 正常跳转，则修改之前路由为灰色，当前路由为蓝色
            this.getIsEdited = false
            console.log(this.$route.path, '1');
            const aItem = Array.from(document.getElementsByTagName('a'))
            aItem.forEach(item => {
              if (item.hash === '#' + this.$route.path && item.firstChild.nodeType === 1) {
                item.firstChild.style.color = 'rgb(191, 203, 217)';
              }
            })
            next()
            console.log(this.$route.path, '2');
            aItem.forEach(item => {
              if (item.hash === '#' + this.$route.path && item.firstChild.nodeType === 1) {
                item.firstChild.style.color = 'rgb(64, 158, 255)';
              }
            })
          })
          .catch(() => {
            // 取消则修改当前路由颜色为蓝色
            const aItem = Array.from(document.getElementsByTagName('a'))
            aItem.forEach(item => {
              if (item.hash === '#' + this.$route.path && item.firstChild.nodeType === 1) {
                item.firstChild.style.color = 'rgb(64, 158, 255)';
              }
            })
            // 如果取消跳转地址栏会变化，这时保持地址栏不变
            next(false)
          })
      }, 100)
    } else {
      next()
    }
  }
}

